{% extends "trees/base.html" %}
{% block title %}A few details - JM3{% endblock %}
{% block content %}
<div class="col-12 col-md-5 mx-auto" style="margin-top:6vh;">
  <div class="progress mb-4" style="height:6px;"><div class="progress-bar bg-jm3" style="width:95%"></div></div>
  <h3 class="mb-1">Tell us about you</h3>
  <p class="text-muted">Your name and what you do.</p>

  <form method="post" class="bg-white p-4 rounded shadow-sm">
    {% csrf_token %}

    <div class="mb-3"><label class="form-label">Your name</label>
      <input type="text" name="name" class="form-control" placeholder="e.g. Clinton" required></div>
    <div class="mb-3"><label class="form-label">Email</label>
      <input type="email" name="email" class="form-control" placeholder="e.g. clinton@example.com" required></div>

    {% if usage == "individual" %}
      <div class="mb-3"><label class="form-label">Occupation</label>
        <input type="text" name="occupation" class="form-control" placeholder="e.g. Farmer, Teacher, Entrepreneur" required></div>

    {% elif usage == "school" %}
      <div class="mb-3"><label class="form-label">School Name</label>
        <input type="text" name="org_name" class="form-control" required></div>
      <div class="mb-3"><label class="form-label">Your role</label>
        <select name="school_role" class="form-select">
          <option value="teacher">Teacher</option>
          <option value="administrator">Administrator</option>
          <option value="student">Student</option>
        </select></div>

    {% elif usage == "community" or usage == "organization" or usage == "government" %}
      <div class="mb-3"><label class="form-label">
        {% if usage == "government" %}Department Name{% elif usage == "community" %}Group Name{% else %}Organization Name{% endif %}</label>
        <input type="text" name="org_name" class="form-control" required></div>
      {% if usage != "government" %}
      <div class="mb-3"><label class="form-label">Number of Members</label>
        <input type="number" name="members" min="1" class="form-control" placeholder="e.g. 25"></div>
      {% endif %}

    {% else %}
      <div class="mb-3"><label class="form-label">Distinction (optional)</label>
        <input type="text" name="org_name" class="form-control" placeholder="e.g. Your group or role"></div>
    {% endif %}

    <button type="submit" class="btn btn-jm3 btn-lg w-100">Finish</button>
  </form>
</div>
{% endblock %}
{% block extra_js %}{% endblock %}